<template>
  <div>
    <el-card class="box-card">
      <div class="searchBox">
        <el-input placeholder="请输入订单编号" v-model="orderNumber" class="searchInput">
          <el-button slot="append" icon="el-icon-search" class="searchBtn" @click="search()">搜索</el-button>
        </el-input>
      </div>
      <el-table :data="tableData" class="orderTable" @filter-change="searchStatus">
        <el-table-column prop="imgPath" label="广告图" align="center" style="width:18.45%">
          <template slot-scope="scope">
            <img :src="scope.row.imgPath" alt="" class="adImg">
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID" align="center" style="width:8.5%">
        </el-table-column>
        <el-table-column prop="orderNumber" label="订单编号" align="center" style="width:25%">
        </el-table-column>
        <el-table-column prop="submitTime" label="提交时间" align="center" style="width:15.5%">
        </el-table-column>
        <el-table-column prop="status" column-key="status" :filter-multiple="false" label="所有状态" :filters="filterData" filter-placement="bottom-end" align="center" style="width:11.5%">
          <template slot-scope="scope">
            <span class="status1" v-if="scope.row.status==1">创建中</span>
            <span class="status2" v-if="scope.row.status==2">待审核</span>
            <span class="status3" v-if="scope.row.status==3">未通过</span>
            <span class="status4" v-if="scope.row.status==4">待投放</span>
            <span class="status5" v-if="scope.row.status==5">投放中</span>
            <span class="status6" v-if="scope.row.status==6">已完成</span>
            <span class="status7" v-if="scope.row.status==7">待充值</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" align="center" style="width:21.05%">
          <template slot-scope="scope">
            <ul class="orderOption">
              <li v-if='scope.row.status==1'>
                <el-button size="mini" type="text" @click.native.prevent="deleteOrder(scope.$index,tableData)">取消投放</el-button>
              </li>
              <li>
                <el-button size="mini" type="text" @click.native.prevent="viewDetails(scope.$index,tableData)">查看详情</el-button>
              </li>
              <li v-if='scope.row.status==6'>
                <el-button size="mini" type="text">再次投放</el-button>
              </li>
            </ul>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBox">
        <el-pagination @size-change="SizeChange" @current-change="CurrentChange" :page-size="pageSize" layout="prev, pager, next, jumper" :total="totalCount">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalCount: 1000,
      pageSize: 20,
      orderNumber: "",
      filterData: [
        { text: "创建中", value: 1 },
        { text: "待审核", value: 2 },
        { text: "未通过", value: 3 },
        { text: "待投放", value: 4 },
        { text: "投放中", value: 5 },
        { text: "已完成", value: 6 },
        { text: "待充值", value: 7 }
      ],
      filterValue: {},
      tableData: [
        {
          imgPath: "static/images/adImg.jpg",
          id: 23455656,
          orderNumber: "in3455656345234543444",
          submitTime: "2018-09-23 12:22",
          status: 1
        },
        {
          imgPath: "static/images/adImg.jpg",
          id: 23455656,
          orderNumber: "in3455656345234543444",
          submitTime: "2018-09-23 12:22",
          status: 2
        },

        {
          imgPath: "static/images/adImg.jpg",
          id: 23455656,
          orderNumber: "in3455656345234543444",
          submitTime: "2018-09-23 12:22",
          status: 3
        },

        {
          imgPath: "static/images/adImg.jpg",
          id: 23455656,
          orderNumber: "in3455656345234543444",
          submitTime: "2018-09-23 12:22",
          status: 4
        },

        {
          imgPath: "static/images/adImg.jpg",
          id: 23455656,
          orderNumber: "in3455656345234543444",
          submitTime: "2018-09-23 12:22",
          status: 5
        },

        {
          imgPath: "static/images/adImg.jpg",
          id: 23455656,
          orderNumber: "in3455656345234543444",
          submitTime: "2018-09-23 12:22",
          status: 6
        },

        {
          imgPath: "static/images/adImg.jpg",
          id: 23455656,
          orderNumber: "in3455656345234543444",
          submitTime: "2018-09-23 12:22",
          status: 7
        }
      ]
    }
  },
  methods: {
    search() {
      console.log(this.orderNumber)
    },
    searchStatus(filters) {
      console.log("您选择的是" + filters.status[0])
      console.log(this.orderNumber)
    },
    SizeChange() {},
    CurrentChange() {},
    viewDetails(){
        this.$router.push("/advertisingDetails")
    },
    deleteOrder(index, tableData) {
      this.$confirm("确认删除此订单？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          })
        })
    }
  }
}
</script>

<style>
.el-table-filter__list-item.is-active {
  background: #fd893e;
}
.el-table-filter__list-item.is-active:hover {
  background: #fd893e;
  color: #ffffff;
}
.el-table-filter__list-item:hover {
  color: #fd893e;
  background: #fbf0e5;
}
.el-message-box {
  width: 90%;
  max-width: 356px;
}
.el-message-box__headerbtn {
  opacity: 0;
}
.el-message-box__message {
  font-size: 16px;
  color: #000000;
  line-height: 200%;
}
.el-message-box__btns {
  padding: 20px 15px 0;
}
.el-message-box .el-button--default {
  color: #fd893e !important;
  border-color: #fd893e !important;
  background: none !important;
  min-width: 100px;
}
.el-message-box .el-button--primary {
  color: #ffffff !important;
  background: #fd893e !important;
  border-color: #fd893e !important;
}
</style>


